<template>
  <div class="mine">
    <div class="header">
      <van-image
        width="60"
        height="60"
        src="https://z3.ax1x.com/2021/07/21/WURUqx.png"
      />
      <span @click="tologin" v-if="flag == 1">请登录</span>
      <span v-else>{{ user }}</span>
      <van-image
        width="23"
        height="23"
        src="https://z3.ax1x.com/2021/07/21/WatMRS.png"
      />
    </div>
    <!-- 跳转登录 -->
    <div class="text">
      <span @click="handleclick3">家人&nbsp;<strong>0</strong></span>
      <span @click="handleclick3">医生&nbsp;<strong>0</strong></span>
      <span @click="handleclick3">优惠券&nbsp;<strong>3</strong></span>
    </div>
    <div class="vip">
      <img
        src="https://z3.ax1x.com/2021/07/16/WMGL2F.png"
        alt=""
        @click="govip"
      /><!--点击跳转健康vip -->
    </div>
    <div class="orderform">
      <!-- 我的订单 -->
      <div class="text1"><span>我的订单</span><em>全部产品 ></em></div>
      <div class="forward">
        <van-grid :column-num="4" :border="false" @click="handleclick3">
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/16/WMzNvj.png"
            text="预约挂号"
            class="img"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/16/WMzr5T.png"
            text="咨询订单"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/16/WMz6GF.png"
            text="商城订单"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/16/WMzc24.png"
            text="专科服务"
            @click="handleclick3"
          />
        </van-grid>
      </div>
    </div>
    <!-- hpv疫苗 -->
    <div class="advertising">
      <img src="https://z3.ax1x.com/2021/07/16/WQ97GT.png" alt="" />
    </div>
    <div class="tool">
      <p>常用工具</p>
      <van-grid :column-num="4" :gutter="0" :border="false">
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQCLff.png"
          text="我的处方"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPJje.png"
          text="新人福利"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPNBd.png"
          text="健康档案"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQP04P.png"
          text="我的收藏"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPr38.png"
          text="邀请分享"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPsgS.png"
          text="健康量表"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPyjg.png"
          text="我的保险"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPgBj.png"
          text="睡眠管理"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPh40.png"
          text="心肺康复"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPbDJ.png"
          text="号源提醒"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPxC6.png"
          text="健康管理"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQPz8K.png"
          text="使用激活码"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQiSgO.png"
          text="我的钱包"
          @click="handolclick"
        /><!-- 点击跳转我的钱包 -->
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQipvD.png"
          text="联系客服"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQiPDH.png"
          text="常见问题"
          @click="handleclick3"
        />
        <van-grid-item
          icon="https://z3.ax1x.com/2021/07/16/WQikVA.png"
          text="扫码支付"
          @click="handleclick3"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { onBeforeMount, ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    const flag = ref("1");
    let user = ref("");
    onBeforeMount(() => {
      if (sessionStorage.getItem("keyone")) {
        flag.value = 2;
        user.value = sessionStorage.getItem("keyone");
      } else {
        flag.value = 1;
      }
    });
    const router = useRouter();
    const handolclick = () => {
      router.push("/money");
    };
    const tologin = () => {
      sessionStorage.setItem("router", "#/home/mine");
      router.push("/login");
    };
    const handleclick3 = () => {
      Toast("功能建设中...敬请期待！！！");
    };
    const govip = () => {
      router.push("/vip");
    };
    // location.reload();
    return {
      handolclick,
      govip,
      tologin,
      handleclick3,
      ref,
      user,
      flag,
    };
  },
};
</script>
<style lang="less" scoped>
.mine {
  padding: 20px 18px 0 18px;
  background: linear-gradient(#f6f6ff, #fff);
  .header {
    display: flex;

    span {
      font-size: 19px;
      // flex: 1;
      line-height: 60px;
      margin-left: 13px;
      width: 100px;
      display: inline-block;
      margin-right: 140px;
    }
  }
  .text {
    font-size: 13px;
    display: flex;
    span {
      flex: 1;
      text-align: center;
      line-height: 45px;
      color: #b7b7bb;
      strong {
        color: #000;
      }
    }
  }
  .vip {
    padding-top: 8px;
    img {
      width: 100%;
    }
  }
  .orderform {
    padding: 6px 2px 0 2px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0px 0px 6px #eee;
    .text1 {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      span {
        font-size: 16px;
        font-weight: 600;
      }
      em {
        font-weight: 500;
        font-size: 12px;
        color: #aaaaaa;
      }
    }
  }
  .advertising {
    img {
      width: 100%;
      padding: 12px 0px;
    }
  }
  .tool {
    color: #424242;
    font-size: 12px;
    box-shadow: 0px 5px 10px #eee;
    padding: 10px 5px;
    background: #ffffff;
    border-radius: 5px;
    p {
      font-size: 18px;
      line-height: 18px;
    }
  }
}
</style>
